<template>
  <div>
    <div id="tree"></div>
  </div>
</template>
<script>
  Vue.filter('bigNumberTransform', )

  export default {
    data(){
      return{

      }
    },
    mounted(){
      this.tree();
    },
    methods:{
      function(value) {
        const newValue = ['', '', '']
        let fr = 1000
        let num = 3
        let text1 = ''
        let fm = 1
        while (value / fr >= 1) {
          fr *= 10
          num += 1
          // console.log('数字', value / fr, 'num:', num)
        }
        if (num <= 4) { // 千
          newValue[0] = parseInt(value / 1000) + ''
          newValue[1] = '千'
        } else if (num <= 8) { // 万
          text1 = parseInt(num - 4) / 3 > 1 ? '千万' : '万'
          // tslint:disable-next-line:no-shadowed-variable
          fm = text1 === '万' ? 10000 : 10000000
          if (value % fm === 0) {
            newValue[0] = parseInt(value / fm) + ''
          } else {
            newValue[0] = parseFloat(value / fm).toFixed(2) + ''
          }
          newValue[1] = text1
        } else if (num <= 16) { // 亿
          text1 = (num - 8) / 3 > 1 ? '千亿' : '亿'
          text1 = (num - 8) / 4 > 1 ? '万亿' : text1
          text1 = (num - 8) / 7 > 1 ? '千万亿' : text1
          // tslint:disable-next-line:no-shadowed-variable
          fm = 1
          if (text1 === '亿') {
            fm = 100000000
          } else if (text1 === '千亿') {
            fm = 100000000000
          } else if (text1 === '万亿') {
            fm = 1000000000000
          } else if (text1 === '千万亿') {
            fm = 1000000000000000
          }
          if (value % fm === 0) {
            newValue[0] = parseInt(value / fm) + ''
          } else {
            newValue[0] = parseFloat(value / fm).toFixed(2) + ''
          }
          newValue[1] = text1
        }
        if (value < 1000) {
          newValue[0] = value + ''
          newValue[1] = ''
        }
        return newValue.join('')
      },
      tree(){
        let tr = this.$echarts.init(document.getElementById("tree"));
        tr.setOption({
          title : {
            show:false
          },
          calculable : false,
          series : [{
            name:'树图',
            type:'tree',
            //排列方式，横向、纵向
            orient: 'vertical',
            left: '2%',
            right: '2%',
            top: '12%',
            bottom: '12%',
            //连接线长度
            layerPadding: 30,
            //结点间距
            nodePadding: 20,
            //图形形状
            symbol: 'circle',
            //尺寸大小
            symbolSize: 40,
            label:{
              normal:{
                show:true,
                formatter:function(param){
                  if(param.name=="销售部"){
                    return ''
                  }else{
                    return param.name
                  }
                },
              },
              emphasis:{
                show:false,
              }
            },
            leaves: {//最底部文字样式
              label: {
                normal: {
                  position: 'bottom',
                  rotate: -90,
                  verticalAlign: 'middle',
                  align: 'left',
                  show:false
                },
                emphasis:{
                  show:false
                }
              }
            },
            lineStyle:{//正常情况显示
              color: 'red',
              width: 1,
            },
            data: [
              {
                name: '销售部',
                //图片大小
                symbolSize: [60, 80],
                //自定义图片
                symbol: 'image://https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
                children: [
                  {
                    name: '销售一部',
                    symbol: 'circle',
                    lineStyle:{
                      color:"red"
                    },
                    symbolSize: [60, 60],
                    children: [
                      {
                        name: '李大',
                        symbol: 'image://https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
                        symbolSize: [60, 80],
                        lineStyle:{
                          color:"red"
                        }
                      },
                      {
                        name: '利尔',
                        symbol: 'image://https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
                        symbolSize: [60, 80],
                        lineStyle:{
                          color:"red"
                        }
                      },
                      {
                        name: '离散',
                        symbol: 'image://https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
                        symbolSize: [60, 80],
                        lineStyle:{
                          color:"red"
                        }
                      },
                      {
                        name: '李屋',
                        symbol: 'image://https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
                        symbolSize: [60, 80],
                        lineStyle:{
                          color:"red"
                        }
                      }
                    ]
                  },
                  {
                    name: '销售二部',
                    symbol: 'circle',
                    symbolSize: [60, 60],
                    lineStyle:{
                      color:"blue"
                    },
                    children: [
                      {
                        name: '王一',
                        symbol: 'image://https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
                        symbolSize: [60, 80],
                        lineStyle:{
                          color:"blue"
                        }
                      },
                      {
                        name: '网二',
                        symbol: 'image://https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
                        symbolSize: [60, 80],
                        lineStyle:{
                          color:"blue"
                        }
                      }
                    ]
                  },
                  {
                    name: '销售三部',
                    symbol: 'circle',
                    symbolSize: [60, 60],
                    lineStyle:{
                      color:"#aaa"
                    },
                    children: [
                      {
                        name: '六大',
                        symbol: 'image://https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
                        symbolSize: [60, 80],
                        lineStyle:{
                          color:"#aaa"
                        }
                      },
                      {
                        name: '六二',
                        symbol: 'image://https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
                        symbolSize: [60, 80],
                        lineStyle:{
                          color:"#aaa"
                        }
                      }
                    ]
                  },
                  {
                    name: '销售四部',
                    symbol: 'circle',
                    symbolSize: [60, 60],
                    lineStyle:{
                      color:"green"
                    },
                    children: [
                      {
                        name: '张一',
                        symbol: 'image://https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
                        symbolSize: [60, 80],
                        lineStyle:{
                          color:"green"
                        }
                      },
                      {
                        name: '张二',
                        symbol: 'image://https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
                        symbolSize: [60, 80],
                        lineStyle:{
                          color:"green"
                        }
                      }
                    ]
                  }
                ]
              }
            ]
          }]
        })
      }
    }
  }
</script>
<style scoped>
  #tree{
    display:inline-block;
    width:900px;
    height:460px;
    background-color:#1d273e;
  }
</style>
